<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link rel="stylesheet" type="text/css" href="css/blue-glass/sidebar.css" />
<style type="text/css">
a {
	color: #020202;
	text-decoration: none;
}
</style>
<title>Starter Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/mainpage/mainpage.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<jsp:include page="navigationBar.jsp"/>

	<div class="container">

		<div id="dashboard" class="list-group"
			style="width: 200px; position: fixed; left: -150px;top:200px;">
			<a href="#" class="list-group-item active">iPayroll Events<span
				class="badge">3</span></a> <a href="#" class="list-group-item">iStaff
				Events<span class="badge">4</span>
			</a> <a href="#" class="list-group-item">iClaim Events<span
				class="badge">5</span></a> <a href="#" class="list-group-item">iLeave
				Events<span class="badge">10</span>
			</a> <a href="#" class="list-group-item">iOverTime Events</a>
		</div>
		<!-- <div class="row show-grid">
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4">.col-md-4</div>
		</div> -->
		<div class="jumbotron">
	        <h1>Hello, iPayroll</h1>
	        <p>The best payroll outsourcing software in the world!</p>
	        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
        </div>

	</div>
	<!-- <ul id="demo_menu1">
		<li><a href="/">home</a></li>
		<li><a href="/plugins/">plugins</a></li>
		<li><a href="/works/">works</a></li>
		<li><a href="http://d.hatena.ne.jp/sideroad/">diary</a></li>
		<li><a href="/about/">about</a></li>
		<li><a href="/contact/">contact</a></li>
	</ul> -->
	<!-- /.container -->

	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.sidebar.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("ul#demo_menu1").sidebar();
			$("#dashboard").hover(function() {
				$(this).animate({
					"left" : "0px"
				}, "slow");
			}, function() {
				$(this).animate({
					"left" : "-150px"
				}, "slow");
			});
		});
	</script>
</body>
</html>
